// 弹性布局混合器
@mixin flex($direction: row, $justify: flex-start, $align: stretch, $wrap: nowrap) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
  flex-wrap: $wrap;
}

// 居中混合器
@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 绝对定位混合器
@mixin absolute($top: auto, $right: auto, $bottom: auto, $left: auto) {
  position: absolute;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

// 固定定位混合器
@mixin fixed($top: auto, $right: auto, $bottom: auto, $left: auto) {
  position: fixed;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

// 文本溢出省略号
@mixin ellipsis($lines: 1) {
  @if $lines == 1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  } @else {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $lines;
    overflow: hidden;
  }
}

// 卡片样式
@mixin card {
  background-color: var(--card-background);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow-light);
  overflow: hidden;
}

// 按钮样式
@mixin button($bg-color: var(--primary-color), $text-color: white) {
  display: inline-block;
  background-color: $bg-color;
  color: $text-color;
  border: none;
  border-radius: var(--border-radius-sm);
  padding: 8px 16px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: opacity 0.2s;
  
  &:active {
    opacity: 0.8;
  }
}

// 过渡效果
@mixin transition($properties: all) {
  transition: $properties var(--transition-duration) var(--transition-timing-function);
}

// 响应式断点
@mixin mobile {
  @media (max-width: 767px) {
    @content;
  }
}

@mixin tablet {
  @media (min-width: 768px) and (max-width: 1023px) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: 1024px) {
    @content;
  }
}

// 图标容器
@mixin icon-container($size: 40px, $bg-color: var(--primary-color)) {
  width: $size;
  height: $size;
  border-radius: 50%;
  background-color: $bg-color;
  @include center;
  color: white;
}

// 渐变背景
@mixin gradient-bg($gradient) {
  background: $gradient;
}